<!DOCTYPE HTML>
<html>

<head>
    <title> 详情页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>订单详情
                <button type="button" id="back-btn" class="pull-right jx-btn btn-positive">返回</button>
            </h4>
        </div>
        <div class="detail-section">
            <div class="row detail-row">
                <div class="span24">
                    <table class="jx-table table-bordered">
                        <thead>
                        <tr>
                            <td colspan="2">订单基础信息</td>
                        </tr>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">订单号：</label>
                            </td>
                            <td>
                                6080240000608
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">订单状态：</label>
                            </td>
                            <td>
                                待支付
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单时间：</label>
                            </td>
                            <td>
                                2017-05-11 11:30:00
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right"> 收款时间：</label>
                            </td>
                            <td>2017-05-11 12:00:00
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">
                                    付款时间：</label>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">发货时间：</label>
                            </td>
                            <td>

                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">完成时间：</label>
                            </td>
                            <td>

                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right"> 撤消时间：</label>
                            </td>
                            <td>

                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right"> 订单备注：</label>
                            </td>
                            <td>

                            </td>
                        </tr>

                    </table>

                    <table id="" class=" jx-table table-bordered">
                        <thead>
                        <tr>
                            <td colspan="4"> 店铺信息</td>
                        </tr>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">店铺ID： </label>
                            </td>
                            <td> 4151451</td>
                            <td width="150">
                                <label class="pull-right">店铺名称：</label>
                            </td>
                            <td> 激想体育专营店</td>
                        </tr>
                    </table>
                    <table id="" class="jx-table  table-bordered">
                        <thead>
                        <tr>
                            <td colspan="4"> 发货信息</td>
                        </tr>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">收货人：</label>
                            </td>
                            <td> 张三
                            </td>
                            <td width="150">
                                <label class="pull-right">运单号：</label>
                            </td>
                            <td> 0173423425</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">收货地址：</label>
                            </td>
                            <td>庆丰东路1号河南省周口市庆丰区</td>
                            <td width="150">
                                <label class="pull-right">承运人：</label>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">联系电话：</label>
                            </td>
                            <td> 0371-68101625</td>
                            <td width="150">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">手机：</label>
                            </td>
                            <td> 18516230495</td>
                            <td width="150">

                            </td>
                            <td></td>
                        </tr>
                    </table>
                    <!-- 表格 start-->
                    <div>
                        <div class="grid-header">商品信息</div>
                        <div id="grid"></div>
                    </div>
                    <!-- 表格 end-->
                    <table id="" class="jx-table table-bordered">
                        <thead>
                        <td colspan="4">
                            订单收款信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">收款通道：</label>
                            </td>
                            <td><span class="x-icon x-icon-small x-icon-error pull-right">
                                <i id="t1" title="" class="icon icon-white icon-bell"></i></span>
                            </td>
                            <td width="150">
                                <label class="pull-right">收货方式：</label>
                            </td>
                            <td>快递
                                <span class="x-icon x-icon-small x-icon-error pull-right">
                                <i id="t2" title="" class="icon icon-white icon-bell"></i></span>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">进货总金额：</label>
                            </td>
                            <td> 18,375.00</td>
                            <td width="150">
                                <label class="pull-right">物流费：</label>
                            </td>
                            <td> 12.00</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">订单应收款：</label>
                            </td>
                            <td>
                                24,375.00
                            </td>
                            <td width="150">
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">现金收款金额：</label>
                            </td>
                            <td></td>
                            <td width="150">

                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">支付宝收款金额：</label>
                            </td>
                            <td></td>
                            <td width="150">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">微信收款金额：</label>
                            </td>
                            <td></td>
                            <td width="150">

                                <label class="pull-right">微信收款号：</label>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">银联收款金额：</label>
                            </td>
                            <td></td>
                            <td width="150">

                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right"> 订单实收款：</label>
                            </td>
                            <td></td>
                            <td width="150">

                            </td>
                            <td></td>
                        </tr>

                    </table>
                    <table id="" class="jx-table table-bordered">
                        <thead>
                        <td colspan="4">
                            订单付款信息
                        </td>
                        </thead>
                        <tr>
                            <td width="150">
                                <label class="pull-right">商品销售总金额：</label>
                            </td>
                            <td> 3495.00
                            </td>
                            <td width="150">
                                <label class="pull-right"> 物流费：</label>
                            </td>
                            <td> 12.00</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">
                                    订单应付款 ：</label>
                            </td>
                            <td> 3495.00
                            </td>
                            <td width="150">

                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">
                                    付款方式：</label>
                            </td>
                            <td>
                            </td>
                            <td width="150">
                                <label class="pull-right">
                                    支付号：</label>
                            </td>
                            <td></td>
                        </tr>
                    </table>
                    <div class="grid-header">
                        操作信息
                    </div>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td>
                            操作平台
                        </td>
                        <td>
                            操作帐号
                        </td>
                        <td>
                            操作名称
                        </td>
                        <td>
                            操作时间
                        </td>
                        </thead>
                        <tr>
                            <td>
                                平台
                            </td>
                            <td> RL001
                            </td>
                            <td>
                                [激想备注］备注
                            </td>
                            <td> 2016-10-11 14:50:31</td>
                        </tr>
                        <tr>
                            <td>
                                平台
                            </td>
                            <td> RL001
                            </td>
                            <td>
                                [激想备注］备注
                            </td>
                            <td> 2016-10-11 14:50:31</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<script type="text/javascript">
    $(function () {
        //关闭当前页
        $("#back-btn").click(function () {
            top.topManager.closePage();
        })
    });
    BUI.use('bui/tooltip', function (Tooltip) {
        //使用模板的，左侧显示
        var t1 = new Tooltip.Tip({
            trigger: '#t1',
            alignType: 'top', //方向
            titleTpl: '<div class="tooltip"><div class="tooltip-inner">{title}</div></div>',
            offset: 15, //距离左边的距离
            title: '说明,<br>线上扫码和线下支付2种方式'
        });
        t1.render();
        var t2 = new Tooltip.Tip({
            trigger: '#t2',
            alignType: 'top', //方向
            titleTpl: '<div class="tooltip"><div class="tooltip-inner">{title}</div></div>',
            offset: 15, //距离左边的距离
            title: '说明<br>收货方式支持2种模式;<br> 1、快递<br> 2、门店自取<br> 选择快递模式，需要填写收货地址信息<br> 如果选择门店自取，默认收货地址为店铺地址。<br>'
        });
        t2.render();
    });
    BUI.use(['bui/grid', 'bui/data'], function (Grid, Data) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '商品货号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '商品品牌',
                dataIndex: 'b',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '品类',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '商品名称',
                elCls: 'center',
                dataIndex: 'd',
                width: 200
            }, {
                title: '规格',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '条形码',
                elCls: 'center',
                dataIndex: 'f',
                width: 100
            }, {

                title: '数量',
                elCls: 'center',
                dataIndex: 'g',
                width: 100
            }, {

                title: '进货价',
                elCls: 'center',
                dataIndex: 'h',
                width: 100
            }, {

                title: '销售价',
                elCls: 'center',
                dataIndex: 'i',
                width: 100
            }, {

                title: '销售额小计',
                elCls: 'center',
                dataIndex: 'j',
                width: 100
            }],
            data = [{
                id: 1,
                a: 'Adidas',
                b: '服饰',
                c: '鞋子',
                d: 'ESSENTIAL STAR 2',
                e: '成人',
                f: '456894564564564',
                g: '5',
                h: '699.00',
                i: '1099.00',
                j: '<span class="jx-text-warning">1099.00</span>'

            }];

        //初始化数据 
        var store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table mb-20',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层

                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            });
        grid.render();

    });
</script>
<body>
</html>
